<template>
  <div>
    <van-nav-bar title="登陆" />
    <van-form>
      <van-field
        v-model="info.username"
        label="账号"
        placeholder="账号"
        
        :rules="rules.username"
      />
      <van-field
        v-model="info.password"
        label="密码"
        placeholder="密码"
        type="password"
        :rules="rules.password"
      />
      <van-field
        v-model="info.mobile"
        label="手机号"
        placeholder="手机号"
        :rules="rules.mobile"
      />
      <van-button type="info" @click="sms_code">发送验证码</van-button>
      <van-field
        v-model="info.code"
        label="验证码"
        placeholder="验证码"
        :rules="rules.code"
        @blur="code"
      />
      <div style="margin: 16px;">
        <van-button
          :loading="isloading"
          loading-text="登陆中"
          round
          block
          type="info"
          native-type="submit"
          @click="login"
          >登陆</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginAPI } from '@/api'
import Axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      isloading: false,
      info: {
        mobile: '',
        code: '',
        username:'',
        password:'',
        code_id:''
      },
      rules: {
        mobile: [
          { pattern: /^1[2-9]\d{9}$/, message: '请填写正确手机号' },
          { required: true, message: '请填写手机号' }
        ],
      }
    }
  },
  methods: {
      login(){
        Axios.post('http://127.0.0.1:5000/users/login',{
          username:this.info.username,
          password:this.info.password,
          mobile:this.info.mobile,
          code:this.info.code
        }).then(res => {
                console.log(res)
                if (res.data.code == 200){
                    alert(res.data.msg)
                    this.$router.push({'name':'article'})
                }else{
                    alert(res.data.msg)
                }
            })
      },
 
      phone_verify() {
            // 实例化
            let form_data = new FormData()
            // 添加数据
            form_data.append('code', this.info.code)
            form_data.append('code_id', this.info.code_id)
            // 发送请求
            this.$axios({
                url: 'http://127.0.0.1:5000/users/phone_verify',
                method: 'post',
                data: form_data
            }).then(res => {
                console.log(res)
                if (res.data.code == 200){
                    alert(res.data.msg)
                }else{
                    alert(res.data.msg)
                }
            })

        },
  sms_code(){
          console.log("发送短信验证码")
          Axios.post("http://127.0.0.1:5000/users/sms_code", {
              mobile: this.info.mobile,
            
            })
            .then(res => {
                console.log("短信验证码:", res)
                if(res.data.code == 200){
                    alert(res.data.msg)
                }else{
                    alert(res.data.msg)
                }
            })
            .catch(err => {
                return Promise.reject(err)
            })
        },
  },
  mounted(){
    this.code_id = uuid4()
  }
}
</script>

<style></style>
